import Svg from "@/components/base/Svg"
import { useModalSlideUp } from "@/features/useModal"
import PrivacyPolicyPage from "@/pages/MandatoryPage/subPages/PrivacyPolicyPage"
import TermsPage from "@/pages/MandatoryPage/subPages/TermsPage"
import { LoginAgreeValueAtom } from "@/pages/UserCenterPage/atom"
import { resolveAssetImage } from "@/utils/common"
import styled from "@emotion/styled"
import { useAtom } from "jotai"
import { memo } from "react"
import EasyFormProvider from "./EasyFormProvider"
import { useLoginAction } from "@/features/useSearchAction"

const IconLogo = styled.img`
    width: 136rem;
    height: 32rem;
    object-fit: cover;
`

const loop = () => {}
const Layout = ({ formUrl }: { formUrl: string }) => {
    const [AgreeValue, setAgreeValue] = useAtom(LoginAgreeValueAtom)
    const { close, open } = useModalSlideUp()
    const { openModalToStep } = useLoginAction()
    const onExit = async () => {
        await close()
        if (formUrl === "homeLogin") {
            openModalToStep("login-otp-1")
        }
        if (formUrl === "homeLoginPassword") {
            openModalToStep("login-password")
        }
    }

    const onProceed = async () => {
        setAgreeValue({
            value: true,
            changeType: "MandatoryPage",
        })
        await onExit()
    }

    const goTerms = async () => {
        await close()
        open(<TermsPage formUrl={formUrl} />)
    }

    const goPrivacy = async () => {
        await close()
        open(<PrivacyPolicyPage formUrl={formUrl} />)
    }

    return (
        <Root formUrl={formUrl}>
            <LineBackground />
            <RadialBackground />
            <Content>
                <TopBox>
                    <IconLogo src={resolveAssetImage("pages/HomePage/icon_logo.webp")} />
                    <Title>
                        The following personalities are not allowed to register and/or play in this
                        online gaming website:
                    </Title>
                </TopBox>
                <BodyBox>
                    <Description>
                        <Litem>
                            Government Official or employee connected directly with the operation of
                            the Government or any of its agencies.
                        </Litem>
                        <Litem>
                            Member of the Armed Forces of the Philippines, including the Army, Navy,
                            Air Force, or the Philippine National Police.
                        </Litem>
                        <Litem>Persons under 21 years of age.</Litem>
                        <Litem>
                            Persons included in the PAGCOR’s National Database of Restricted Persons
                            (NDRP).
                        </Litem>
                        <Litem>Gaming Employment License (GEL) holder.</Litem>
                    </Description>
                    <DesriptionOther>
                        Funds or credits in the account of player who is found ineligible to play
                        shall mean forfeiture of said funds/credits in favor of the Government.
                    </DesriptionOther>
                    <EasyFormProvider
                        queryList={["MandatoryCheckbox", "ProceedButton", "ExitButton"]}
                        // @ts-ignore
                        onSubmit={onProceed}
                        onExit={onExit}
                        goTerms={goTerms}
                        goPrivacy={goPrivacy}
                        showSubmitButton={false}
                    />
                    <ImageBox>
                        <Svg src="pages/MandatoryPage/group_icon.svg" />
                    </ImageBox>
                </BodyBox>
            </Content>
        </Root>
    )
}

export default memo(Layout)

const Root = styled.div<{ formUrl: string }>`
    width: 100%;
    height: min(724rem, 100vh);
    display: flex;
    flex-direction: column;
    position: relative;
`

const LineBackground = styled.div`
    height: 144rem;
    width: 100%;
    position: absolute;
    background:
        linear-gradient(180deg, #ffd6eb 0%, #f8f9fa 40%, #f8f9fa 100%),
        radial-gradient(
            100% 70% at 100% 0%,
            rgba(255, 71, 133, 0.15) 0%,
            rgba(255, 71, 133, 0) 100%
        );

    z-index: 2;
    top: 0;
`

const RadialBackground = styled.div`
    background: radial-gradient(
        49.87% 100% at 0% 0%,
        rgba(255, 247, 153, 0.5) 0%,
        rgba(255, 246, 153, 0) 100%
    );
    position: absolute;
    top: 0;
    height: 88rem;
    width: 100%;
    z-index: 3;
`

const Content = styled.div`
    flex: 1;
    z-index: 9;
    display: flex;
    flex-direction: column;
`

const TopBox = styled.div`
    width: 100%;
    height: 120rem;
    margin-top: 16rem;
    padding: 0 24rem;
    text-align: center;
`

const Title = styled.div`
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: 0;
    text-transform: capitalize;
    text-align: left;
    color: #0f0f10;
    height: 36rem;
`

const BodyBox = styled.div`
    width: 100%;
    flex: 1;
    background: #f8f9fa;
    padding: 0 16rem;
`

const Description = styled.ul`
    margin: 0;
    padding: 12rem;
    margin-top: 8rem;
    background: #ffffff;
    border-radius: 8rem;
    border: 1px solid #1c1e2126;
    list-style: none;
`

const Litem = styled.li`
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: 0;
    color: #3e4046;
    padding-left: 28rem;
    margin-bottom: 8rem;
    position: relative;
    &::before {
        content: "";
        position: absolute;
        background: #fb2d60;
        width: 8rem;
        height: 8rem;
        border-radius: 8rem;
        left: 12rem;
        top: 4rem;
    }
`

const DesriptionOther = styled.div`
    margin-top: 12rem;
    margin-bottom: 20rem;
    width: 100%;
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: 0;
    color: #3e4046;
`
const ImageBox = styled.div`
    text-align: center;
    margin-top: 16rem;
`
